import React from 'react';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import DraftsIcon from '@material-ui/icons/Drafts';
import StarIcon from '@material-ui/icons/Star';
import SendIcon from '@material-ui/icons/Send';
import MailIcon from '@material-ui/icons/Mail';
import ExpandLess from '@material-ui/icons/ExpandLess';
import ExpandMore from '@material-ui/icons/ExpandMore';
import DeleteIcon from '@material-ui/icons/Delete';
import ReportIcon from '@material-ui/icons/Report';
import StarBorder from '@material-ui/icons/StarBorder';
import List from '@material-ui/core/List';
import Collapse from '@material-ui/core/Collapse';
const styles = theme => ({
    root: {
      width: '100%',
      maxWidth: 360,
      backgroundColor: theme.palette.background.paper,
    },
    nested: {
      paddingLeft: theme.spacing.unit * 4,
    },
  });
 
// export const mailFolderListItems = (
//     <div>
//         <ListItem button onClick={this.handleClick}>
//             <ListItemIcon>
//               <InboxIcon />
//             </ListItemIcon>
//             <ListItemText inset primary="Inbox" />
//             {this.state.open ? <ExpandLess /> : <ExpandMore />}
//           </ListItem>
//           <Collapse in={this.state.open} timeout="auto" unmountOnExit>
//             <List component="div" disablePadding>
//               <ListItem button className={this.props.nested}>
//                 <ListItemIcon>
//                   <StarBorder />
//                 </ListItemIcon>
//                 <ListItemText inset primary="Starred" />
//               </ListItem>
//             </List>
//           </Collapse>
//         <ListItem button>
//             <ListItemIcon>
//                 <InboxIcon/>
//             </ListItemIcon>
//             <ListItemText primary="11111"/>
//         </ListItem>
//         <ListItem button>
//             <ListItemIcon>
//                 <StarIcon/>
//             </ListItemIcon>
//             <ListItemText primary="Starred"/>
//         </ListItem>
//         <ListItem button>
//             <ListItemIcon>
//                 <SendIcon/>
//             </ListItemIcon>
//             <ListItemText primary="Send mail"/>
//         </ListItem>
//         <ListItem button>
//             <ListItemIcon>
//                 <DraftsIcon/>
//             </ListItemIcon>
//             <ListItemText primary="Drafts"/>
//         </ListItem>
//         <ListItem button>
//             <ListItemIcon>
//                 <DraftsIcon/>
//             </ListItemIcon>
//             <ListItemText primary="Drafts"/>
//         </ListItem>
//         <ListItem button>
//             <ListItemIcon>
//                 <DraftsIcon/>
//             </ListItemIcon>
//             <ListItemText primary="Drafts"/>
//         </ListItem>
//         <ListItem button>
//             <ListItemIcon>
//                 <DraftsIcon/>
//             </ListItemIcon>
//             <ListItemText primary="Drafts"/>
//         </ListItem>
//         <ListItem button>
//             <ListItemIcon>
//                 <DraftsIcon/>
//             </ListItemIcon>
//             <ListItemText primary="Drafts"/>
//         </ListItem>
//     </div>
// );

export const otherMailFolderListItems = (
    <div>
        <ListItem button>
            <ListItemIcon>
                <MailIcon/>
            </ListItemIcon>
            <ListItemText primary="All mail"/>
        </ListItem>
        <ListItem button>
            <ListItemIcon>
                <DeleteIcon/>
            </ListItemIcon>
            <ListItemText primary="Trash"/>
        </ListItem>
        <ListItem button>
            <ListItemIcon>
                <ReportIcon/>
            </ListItemIcon>
            <ListItemText primary="Spam"/>
        </ListItem>
    </div>
);

